<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
		<meta charset="utf-8" />
	<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
   <div class="place">
    <span>位置：</span>
    <ul class="placeul">
    <li><a href="#">数据统计</a></li>
    <li><a href="#">实习信息统计</a></li>
    </ul>
    </div>
    <div class="rightinfo">
    <div class="tools">
        <form id="searchForm" class="form-search" action="jobStudent/practice_statistics_page.do" method="post">
    	<ul class="seachform1">
    	<c:if test="${userRole <=2 }">
    		<li>选择院系：</li>
    	    <li>
    	    <select id="dpselect" name="XY" class="chosen-select col-xs-10 col-sm-5" onchange="selectChanged();">
						<option value="" > -- 全部 -- </option>
						<c:forEach items="${departmentInfoList}" var="departmentInfo">
							<option value="${departmentInfo.XYMC }" <c:if test="${departmentInfo.XYMC == XY }">selected</c:if> >${departmentInfo.XYMC }</option>
						</c:forEach>
					</select>
    	</li>
    	</c:if>
    	<c:if test="${userRole >2 }">
    	<li><input value="${departmentName }" name="XY" type="hidden">${departmentName } </li>
    	</c:if>
		<li>选择专业：</li>  
    	<li>
    		<select name="ZYDM" id="ZYDM" class="chosen-select col-xs-10 col-sm-5" onchange="professionInfoChanged();">
						<option value="" > -- 全部 -- </option>
						<c:forEach items="${professionInfoList}" var="professionInfo">
							<option value="${professionInfo.ZYDM }" <c:if test="${professionInfo.ZYDM == ZYDM }">selected</c:if> >${professionInfo.ZYMC }</option>
						</c:forEach>
					</select>
    	</li>
    	<li>选择班级：</li>  
    	<li>
    		<select name="XZB" id="XZB" class="chosen-select col-xs-10 col-sm-5" >
						<option value="" > -- 全部 -- </option>
						<c:forEach items="${bjdmbList}" var="bjdmb">
							<option value="${bjdmb.BJMC }" <c:if test="${bjdmb.BJMC == XZB }">selected</c:if> >${bjdmb.BJMC }</option>
						</c:forEach>
					</select>
    	</li>
    	<li>选择年级：</li>  
    	<li>
    		<select name="DQSZJ" id="DQSZJ" >
     		<option value="0" > -- 全部 -- </option>
						<c:forEach items="${gradeList}" var="grade">
							<option value="${grade }" >${grade}</option>
						</c:forEach>
       </select>
    	</li>
			<li><input name="" type="button" id="btnSearch" class="scbtn" value="查询"/></li>  
			<div class="clearfix" style="width: 200px;"></div>
		</ul>	
		</form>
    </div>
    <div style="margin:0 auto;width:1150px;height:280px;">
     <div class="statistical" id="statistical" style="width: 540px;height:280px;margin:0 auto;float:left"></div>
	<div  class="statistical"  id="statistical1" style="width: 540px;height:280px;margin:0 auto;float: left;margin-left: 20px;" ></div>
	</div>
    </div>
    <script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script src="js/echarts.min.js"></script>
     <script type="text/javascript">
	$('.tablelist tbody tr:odd').addClass('odd');
	$( "#btnSearch" ).on('click', function(e) {
		$("#searchForm").submit();
	});
	function selectChanged() {
		 var ele=document.getElementById('dpselect');
 	  	var index=ele.selectedIndex;
 	 	 var val=ele.options[index].value;
 	 	$.ajax({
			type: "POST",
			url: "student/departmentInfo.do",
			data: { XYMC : val},
			async: true,
			dataType: "json",
			success: function(data) {
				$("#ZYDM").empty();
				var all="<option value='' >-- 全部 -- </option>";
				for(var i in data.professionInfoList){  
					var $str = "<option value="+data.professionInfoList[i].ZYDM +">"+data.professionInfoList[i].ZYMC +"</option>";
					$("#ZYDM").append($str);  	 
				}
				$("#ZYDM").append(all);  
				$("#XZB").empty();
				for(var i in data.bjdmbList){  
					var $str = "<option value="+data.bjdmbList[i].BJMC +">"+data.bjdmbList[i].BJMC +"</option>";
					$("#XZB").append($str);
				}
				$("#XZB").append(all);
			}
			})
	}
	function professionInfoChanged() {
		 var ele=document.getElementById('ZYDM');
	  	var index=ele.selectedIndex;
	 	 var val=ele.options[index].value;
	 	 var ele1=document.getElementById('dpselect');
  	  	var index1=ele1.selectedIndex;
  	 	 var val1=ele1.options[index1].value;
	 	$.ajax({
			type: "POST",
			url: "student/professionInfo.do",
			data: { ZYDM : val,XYMC : val1},
			async: true,
			dataType: "json",
			success: function(data) {
				var all="<option value='' >-- 全部 -- </option>";
					$("#XZB").empty();
				for(var i in data.bjdmbList){  
					var $str = "<option value="+data.bjdmbList[i].BJMC +">"+data.bjdmbList[i].BJMC +"</option>";
					$("#XZB").append($str);
				}
				$("#XZB").append(all);
			}
			})
	}
	<%----%>
	var myChart = echarts.init(document.getElementById('statistical'));
	option = {
		    title : {
		        text: '实习比列',
		        x:'center'
		    },
		    tooltip : {
		        trigger: 'item',
		        formatter: "{a} <br/>{b} : {c} ({d}%)"
		    },
		    legend: {
		        orient: 'vertical',
		        left: 'left',
		        data: ['在校','自主创业','专升本','自寻企业实习','学校分配企业']
		    },
		    series : [
		        {
		            name: '访问来源',
		            type: 'pie',
		            radius : '55%',
		            center: ['50%', '60%'],
					data:[
			      {value:'${theSchoolCount}', name:'在校'},
			      {value:'${entrepreneurshipCount}', name:'自主创业'},
			      {value:'${upgradedBookCount}', name:'专升本'},
			      {value:'${selfSeekingCount}', name:'自寻企业实习'},
			      {value:'${schoolAssignmentCount}', name:'学校分配企业'}
					            ],
		            itemStyle: {
		                emphasis: {
		                    shadowBlur: 10,
		                    shadowOffsetX: 0,
		                    shadowColor: 'rgba(0, 0, 0, 0.5)'
		                }
		            }
		        }
		    ]
		};
	myChart.setOption(option);
	var myChart = echarts.init(document.getElementById('statistical1'));
	option = {
			 title : {
			        text: '区域分配',
			        x:'center'
			    },
		    tooltip: {
		        trigger: 'item',
		        formatter: "{a} <br/>{b}: {c} ({d}%)"
		    },
		    legend: {
		        orient: 'vertical',
		        x: 'left',
		        data:['安徽省','江苏省','合肥','芜湖','南京']
		    },
		    series: [
		        {
		            name:'访问来源',
		            type:'pie',
		            selectedMode: 'single',
		            radius: [0, '30%'],

		            label: {
		                normal: {
		                    position: 'inner'
		                }
		            },
		            labelLine: {
		                normal: {
		                    show: false
		                }
		            },
		            data:[
		                {value:'${nanjingCount}', name:'江苏省', selected:true},
		                {value:'${hefeiCount + wuhuCount}', name:'安徽省'},
		            ]
		        },
		        {
		            name:'访问来源',
		            type:'pie',
		            radius: ['40%', '55%'],

		            data:[
		                {value:'${nanjingCount}', name:'南京'},
		                {value:'${hefeiCount}', name:'合肥'},
		                {value:'${wuhuCount}', name:'芜湖'},
		            ]
		        }
		    ]
		};
	myChart.setOption(option);
	</script>
</body>

</html>
